<template>
  <div :style="{ width: '100%' }">
    <a-card :style="{ marginBottom: '20px' }">
      <a-card hoverable style="width: 200px">
        <template #cover>
          <a-avatar
            shape="square"
            :size="200"
            :src="GET_PROFILE"
            :style="{
              fontSize: '80px',
              fontWeight: 'bold',
              margin: '0 auto',
              background: 'rgb(24, 144, 255)',
              verticalAlign: 'bottom'
            }"
          >
            {{ username.substring(0, 1) }}
          </a-avatar>
        </template>
        <template #actions>
          <a-upload
            v-model:file-list="fileList"
            :show-upload-list="false"
            :customRequest="modifyProfile"
          >
            <div>
              <UploadOutlined class="site-form-item-icon" />
              上传头像
            </div>
          </a-upload>
        </template>
      </a-card>

      <a-descriptions bordered :style="{ marginTop: '20px' }">
        <a-descriptions-item label="用户名" :span="2">{{
          GET_USERNAME
        }}</a-descriptions-item>
        <a-descriptions-item label="权限">
          {{ GET_IS_ADMIN === 1 ? '管理员' : '普通用户' }}
        </a-descriptions-item>
        <a-descriptions-item label="邮箱" :span="3">
          {{ GET_EMAIL }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card>
      <a-row>
        <a-col :span="8">
          <a-statistic
            title="相册总数(册)"
            :value="statistic.albumTotal"
            style="margin-right: 50px"
          />
        </a-col>
        <a-col :span="8">
          <a-statistic
            title="相片总数（张）"
            :value="statistic.picTotal"
            style="margin-right: 50px"
          />
        </a-col>
        <a-col :span="8">
          <a-statistic title="标签总数（个）" :value="statistic.tagTotal" />
        </a-col>
      </a-row>
    </a-card>

    <a-modal
      v-model:visible="visible"
      title="修改密码"
      @ok="modifyPassword"
      cancelText="取消"
      okText="提交"
    >
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { mapGetters } from 'vuex';
import { UserModule } from '@/store/modules/user';
import { getUserStatistic } from '@/apis/user';
import type { UploadChangeParam } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    UploadOutlined
  },
  data() {
    return {
      visible: false,
      isSend: false,
      sendMsg: '发送验证码'
    };
  },
  setup() {
    const { username, email, profileLink, isAdmin } = UserModule;
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>('');

    const statistic = ref({});
    getUserStatistic().then((res) => {
      statistic.value = res.data;
    });

    const handleChange = (info: UploadChangeParam) => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }
      if (info.file.status === 'done') {

        // // Get this url from response in real world.
        // getBase64(info.file.originFileObj, (base64Url: string) => {
        //   imageUrl.value = base64Url;
        //   loading.value = false;
        // });
        console.log(info);
      }
      if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
      }
    };

    // const beforeUpload = (file: UploadProps['fileList'][number]) => {
    //   const isJpgOrPng =
    //     file.type === 'image/jpeg' || file.type === 'image/png';
    //   if (!isJpgOrPng) {
    //     message.error('仅支持上传jpg,png,jpeg格式的图片!');
    //   }
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   if (!isLt2M) {
    //     message.error('图片大小必须小于2MB!');
    //   }
    //   return isJpgOrPng && isLt2M;
    // };

    return {
      username,
      email,
      profileLink,
      isAdmin,
      fileList,
      loading,
      imageUrl,
      statistic,
      handleChange

      // beforeUpload
    };
  },
  created() {},
  computed: {
    ...mapGetters('user', [
      'GET_USERNAME',
      'GET_EMAIL',
      'GET_PROFILE',
      'GET_IS_ADMIN'
    ])
  },
  methods: {
    modifyProfile(options: any) {
      const file = options.file;
      const formData: FormData = new FormData();
      formData.append('profile', file);
      UserModule.ModifyProfile(formData).then((res) => {
        message.success('更新头像成功');
      });
    },
    showModal() {
      this.visible = true;
    }
  }
});
</script>
